<template>
  <div class="content">
    <div class="left">
      <div class="bar">温度状况</div>
      <div class="dataHeard">
        <ul>
          <li style="width: 220px">时间</li>
          <li style="width: 100px">温度（℃）</li>
          <li style="width: 100px; text-align: center">状况</li>
        </ul>
      </div>
      <div class="data">
        <vue-seamless-scroll
          :class-option="optionHover"
          :data="dataList"
          class="seamless-warp"
        >
          <ul v-for="(item, index) in dataList" :key="index">
            <li>
              <img
                src="~@/assets/dataVisualization/emergencyPlan/doubleTriangle.png"
              />
            </li>
            <li class="dataOne" :title="item.time">
              {{ item.time }}
            </li>
            <li style="width: 100px; margin-left: 28px">
              {{ item.temperature }}
            </li>
            <li :class="item.temperature > 800 ? 'dataNameTwo' : 'dataName'">
              {{ item.temperature > 800 ? "异常" : "正常" }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="between">
      <el-carousel :interval="5000" height="470px">
        <el-carousel-item v-for="(item, index) in dataBetweenList" :key="index">
          <div class="leftData">
            <div class="leftDataOne">
              <div class="dataOne">{{ leftDataOne }}</div>
              <div class="dataTow">温度记录数</div>
            </div>
            <div class="leftDataTow">
              <div class="dataOne">{{ leftDataOne - leftDataThree }}</div>
              <div class="dataTow">正常</div>
            </div>
            <div class="leftDataThree">
              <div class="dataOne">{{ leftDataThree }}</div>
              <div class="dataTow">异常</div>
            </div>
          </div>
          <div class="betweenData">
            <div class="data">{{ rightDataThree + leftDataThree }}</div>
            <div class="dataTitle">待处理数量</div>
          </div>
          <div class="rightData">
            <div class="rightDataOne">
              <div class="dataOne">{{ rightDataOne }}</div>
              <div class="dataTow">光敏记录数</div>
            </div>
            <div class="rightDataTow">
              <div class="dataOne">{{ rightDataOne - rightDataThree }}</div>
              <div class="dataTow">正常</div>
            </div>
            <div class="rightDataThree">
              <div class="dataOne">{{ rightDataThree }}</div>
              <div class="dataTow">异常</div>
            </div>
          </div>
          <div class="bottomData">
            <div class="dataOne">今日设备接收总数据</div>
            <div class="dataTow">
              <ul>
                <li>{{ i == null ? 0 : i }}</li>
                <li>{{ h == null ? 0 : h }}</li>
                <li>{{ g == null ? 0 : g }}</li>
                <div class="commaOne">,</div>
                <li style="margin-left: 20px">{{ f == null ? 0 : f }}</li>
                <li>{{ e == null ? 0 : e }}</li>
                <li>{{ d == null ? 0 : d }}</li>
                <div class="commaTow">,</div>
                <li style="margin-left: 20px">
                  {{ hundreds == null ? 0 : hundreds }}
                </li>
                <li>{{ decade }}</li>
                <li>{{ theUnit }}</li>
                <div class="company">条</div>
              </ul>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right">
      <div class="bar">湿度状况</div>
      <div class="dataHeard">
        <ul>
          <li style="width: 220px">时间</li>
          <li style="width: 100px">湿度</li>
          <li style="width: 100px; text-align: center">状况</li>
        </ul>
      </div>
      <div class="data">
        <vue-seamless-scroll
          :class-option="optionHover"
          :data="dataRightList"
          class="seamless-warp"
        >
          <ul v-for="(item, index) in dataRightList" :key="index">
            <li>
              <img
                src="~@/assets/dataVisualization/emergencyPlan/doubleTriangle.png"
              />
            </li>
            <li class="dataOne" :title="item.time">
              {{ item.time }}
            </li>
            <li style="width: 100px; margin-left: 28px">{{ item.humidity }}</li>
            <li :class="item.humidity > 100 ? 'dataNameTwo' : 'dataName'">
              {{ item.humidity > 100 ? "异常" : "正常" }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="bottomOne">
      <div class="bar">光敏状况</div>
      <div class="dataHeard">
        <ul>
          <li style="width: 220px">时间</li>
          <li style="width: 100px">光敏</li>
          <li style="width: 100px; text-align: center">状况</li>
        </ul>
      </div>
      <div class="data">
        <vue-seamless-scroll
          :class-option="optionHover"
          :data="dataBottomOneList"
          class="seamless-warp"
        >
          <ul v-for="(item, index) in dataBottomOneList" :key="index">
            <li>
              <img
                src="~@/assets/dataVisualization/emergencyPlan/doubleTriangle.png"
              />
            </li>
            <li class="dataOne" :title="item.time">
              {{ item.time }}
            </li>
            <li style="width: 100px; margin-left: 28px">
              {{ item.illumination }}
            </li>
            <li :class="item.illumination > 1000 ? 'dataNameTwo' : 'dataName'">
              {{ item.illumination > 1000 ? "异常" : "正常" }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="bottomTow">
      <div class="bar">硬件状况</div>
      <div class="dataHeard">
        <ul>
          <li style="width: 220px">时间</li>
          <li style="width: 100px">硬件名称</li>
          <li style="width: 100px; text-align: center">状况</li>
        </ul>
      </div>
      <div class="data">
        <vue-seamless-scroll
          :class-option="optionHover"
          :data="dataBottomTowList"
          class="seamless-warp"
        >
          <ul v-for="(item, index) in dataBottomTowList" :key="index">
            <li>
              <img
                src="~@/assets/dataVisualization/emergencyPlan/doubleTriangle.png"
              />
            </li>
            <li class="dataOne" :title="item.time">
              {{ item.time }}
            </li>
            <li
              :title="item.name + item.id + '号'"
              style="
                width: 100px;
                margin-left: 28px;
                cursor: pointer;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ item.name + item.id + "号" }}
            </li>
            <li class="dataName">在线</li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
//导入硬件基本信息api脚本
import sensorInformationApi from "@/api/sensorInformation";
//导入sensorHistoricalData脚本
import sensorHistoricalDataApi from "@/api/sensorHistoricalData";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      leftDataThree: "0", //温度异常数
      leftDataOne: "0", //温度总数
      rightDataOne: "",
      rightDataThree: "0", //光敏异常数
      dataList: [],
      dataBetweenList: [
        {
          title: "方案一",
        },
      ],
      dataRightList: [],
      dataBottomOneList: [],
      dataBottomTowList: [],
      theUnit: "0", //个位
      decade: "0", //十位
      hundreds: "0", //百位
      d: "0",
      e: "0",
      f: "0",
      g: "0",
      h: "0",
      i: "0",
    };
  },
  computed: {
    optionHover() {
      return {
        hoverStop: true, // 鼠标悬停停止滚动
        direction: 1, // 向下/上滚动
        step: 0.5, // 滚动速度
        // singleHeight: 20, // 滚动单行
        // waitTime:2500 单行停顿时间
      };
    },
  },
  mounted() {
    this.postSensorHistoricalDataByDeviceIdSixteenApi();
    this.postSensorHistoricalDataByDeviceIdApi();
    this.postSensorInformationBindByUserNameSevenApi();
    this.unusualNumberApi();
    this.totalRecordsApi();
    this.unusualNumberIlluminationApi();
    this.timer = setInterval(() => {
      this.postSensorHistoricalDataByDeviceIdApi();
      this.postSensorHistoricalDataByDeviceIdOneApi();
    }, 6000);
  },
  beforeDestroy() {
    //页面关闭前关闭定时器 （这个才有用）
    clearInterval(this.timer);
  },
  methods: {
    /**
     * 查询异常温度个数
     */
    async unusualNumberApi() {
      let res = await sensorHistoricalDataApi.unusualNumberApi();
      let n = res.data;
      this.leftDataThree = n;
    },
    // /**
    //  * 查询异常湿度个数
    //  */
    // async unusualNumberHumidityApi() {
    //   let res = await sensorHistoricalDataApi.unusualNumberHumidityApi();
    //   let n = res.data;
    //   this.rightDataThree = n;
    // },
    /**
     * 查询异常光敏个数
     */
    async unusualNumberIlluminationApi() {
      let res = await sensorHistoricalDataApi.unusualNumberIlluminationApi();
      let n = res.data;
      this.rightDataThree = n;
    },
    /**
     * 查询温度总个数
     */
    async totalRecordsApi() {
      let res = await sensorHistoricalDataApi.totalRecordsApi();
      let n = res.data;
      let numArr = String(n).split("");
      this.theUnit = numArr[numArr.length - 1];
      this.decade = numArr[numArr.length - 2];
      this.hundreds = numArr[numArr.length - 3];
      this.d = numArr[numArr.length - 4];
      this.e = numArr[numArr.length - 5];
      this.f = numArr[numArr.length - 6];
      this.g = numArr[numArr.length - 7];
      this.h = numArr[numArr.length - 8];
      this.i = numArr[numArr.length - 9];
      this.leftDataOne = n;
      this.rightDataOne = n;
    },
    /**
     * 查询历史数据16条记录
     */
    async postSensorHistoricalDataByDeviceIdSixteenApi() {
      //先写死
      let params = { deviceId: "b8:27:eb:ca:2b:5b" };
      let res =
        await sensorHistoricalDataApi.postSensorHistoricalDataByDeviceIdSixteenApi(
          params
        );
      this.dataList = res.data;
      this.dataRightList = res.data;
    },
    /**
     * 查询历史数据7条记录
     */
    async postSensorHistoricalDataByDeviceIdApi() {
      //先写死
      let params = { deviceId: "b8:27:eb:ca:2b:5b" };
      let res =
        await sensorHistoricalDataApi.postSensorHistoricalDataByDeviceIdApi(
          params
        );
      this.dataBottomOneList = res.data;
    },
    /**
     * 查询历史数据1条记录
     */
    async postSensorHistoricalDataByDeviceIdOneApi() {
      //先写死
      let params = { deviceId: "b8:27:eb:ca:2b:5b" };
      let res =
        await sensorHistoricalDataApi.postSensorHistoricalDataByDeviceIdOneApi(
          params
        );
      //发送邮件
      if (res.data[0].illumination > 1000) {
        await sensorHistoricalDataApi.email();
      }
    },
    /**
     * 查询7条用户绑定记录
     */
    async postSensorInformationBindByUserNameSevenApi() {
      let params = { userName: this.$store.getters.userName };
      let res =
        await sensorInformationApi.postSensorInformationBindByUserNameSevenApi(
          params
        );
      this.dataBottomTowList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 980px;
  position: relative;
  .left {
    float: left;
    width: 460px;
    height: 980px;
    background: url(~@/assets/dataVisualization/emergencyPlan/emergencyPlanLeft.png);
    .bar {
      width: 460px;
      height: 50px;
      background: url(~@/assets/dataVisualization/emergencyPlan/bar.png)
        no-repeat center;
      position: absolute;
      top: 20px;
      padding-left: 50px;
      line-height: 50px;
      color: white;
      font-size: 1.3em;
    }
    .dataHeard {
      position: absolute;
      top: 90px;
      left: 20px;
      width: 420px;
      height: 50px;
      background-color: #07173d;
      border-bottom: 1px solid #7b86b8;
      color: #6ebaff;
      li {
        float: left;
        list-style-type: none;
        height: 50px;
        line-height: 50px;
      }
    }
    .data {
      position: absolute;
      top: 160px;
      left: 20px;
      width: 420px;
      height: 800px;
      color: white;
      overflow: hidden;
      ul {
        position: relative;
        width: 420px;
        height: 50px;
        li {
          float: left;
          list-style-type: none;
          height: 50px;
          line-height: 50px;
        }
        li img {
          position: absolute;
          top: 9px;
        }
        .dataOne {
          cursor: pointer;
          margin-left: 28px;
          width: 164px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .dataName {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #18fefe;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #0a425d;
          text-align: center;
        }
        .dataNameTwo {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #fc1505;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #64301f;
          text-align: center;
        }
      }
    }
  }
  .between {
    float: left;
    width: 940px;
    height: 470px;
    margin-left: 30px;
    position: relative;
    .el-carousel__item {
      background: url(~@/assets/dataVisualization/emergencyPlan/emergencyPlanBetween.png)
        no-repeat center;
      .leftData {
        position: absolute;
        top: 120px;
        left: 40px;
        width: 240px;
        height: 184px;
        .leftDataOne {
          float: left;
          width: 240px;
          height: 76px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgba(0, 145, 255, 1);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #6ebaff;
          .dataOne {
            width: 240px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 240px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
        .leftDataTow {
          float: left;
          width: 110px;
          height: 76px;
          margin-top: 32px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgb(3, 250, 24);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #04f724;
          .dataOne {
            width: 110px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 110px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
        .leftDataThree {
          float: left;
          width: 110px;
          height: 76px;
          margin-left: 20px;
          margin-top: 32px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgb(253, 96, 5);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #fc3e04;
          .dataOne {
            width: 110px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 110px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
      }
      .rightData {
        position: absolute;
        top: 120px;
        right: 40px;
        width: 240px;
        height: 184px;
        .rightDataOne {
          float: left;
          width: 240px;
          height: 76px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgba(0, 145, 255, 1);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #6ebaff;
          .dataOne {
            width: 240px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 240px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
        .rightDataTow {
          float: left;
          width: 110px;
          height: 76px;
          margin-top: 32px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgb(3, 250, 24);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #04f724;
          .dataOne {
            width: 110px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 110px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
        .rightDataThree {
          float: left;
          width: 110px;
          height: 76px;
          margin-left: 20px;
          margin-top: 32px;
          background: black;
          box-shadow: inset 0px 0px 40px 0px rgb(253, 96, 5);
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #fc3e04;
          .dataOne {
            width: 110px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 1.8em;
            color: white;
          }
          .dataTow {
            width: 110px;
            height: 38px;
            text-align: center;
            font-size: 1.2em;
            color: white;
          }
        }
      }
      .bottomData {
        width: 940px;
        height: 164px;
        position: absolute;
        bottom: 0px;
        .dataOne {
          width: 940px;
          height: 52px;
          line-height: 52px;
          text-align: center;
          font-size: 2em;
          color: white;
        }
        .dataTow {
          width: 940px;
          height: 112px;
          ul {
            position: relative;
            width: 940px;
            height: 112px;
            padding-left: 165px;
            list-style-type: none;
            li {
              float: left;
              margin-left: 5px;
              width: 56px;
              height: 56px;
              text-align: center;
              line-height: 56px;
              color: #00fff3;
              font-size: 2em;
              font-weight: 900;
              background: url(~@/assets/dataVisualization/emergencyPlan/bottom.png);
            }
            .commaOne {
              color: white;
              position: absolute;
              top: 40px;
              left: 353px;
              font-weight: 900;
            }
            .commaTow {
              color: white;
              position: absolute;
              top: 40px;
              left: 552px;
              font-weight: 900;
            }
            .company {
              width: 56px;
              height: 56px;
              line-height: 56px;
              text-align: center;
              color: white;
              position: absolute;
              left: 750px;
              font-size: 2em;
              font-weight: 900;
            }
          }
        }
      }
      .betweenData {
        position: absolute;
        left: 259px;
        width: 420px;
        height: 420px;
        background: url(~@/assets/dataVisualization/emergencyPlan/betweenData.png);
        .data {
          width: 420px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin-top: 170px;
          color: #18fefe;
          font-size: 2.2em;
        }
        .dataTitle {
          width: 420px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: white;
          font-size: 1.5em;
        }
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      text-align: center;
      margin: 0;
    }
  }
  .right {
    float: left;
    width: 460px;
    height: 980px;
    margin-left: 30px;
    background: url(~@/assets/dataVisualization/emergencyPlan/emergencyPlanLeft.png);
    .bar {
      width: 460px;
      height: 50px;
      background: url(~@/assets/dataVisualization/emergencyPlan/bar.png)
        no-repeat center;
      position: absolute;
      top: 20px;
      padding-left: 50px;
      line-height: 50px;
      color: white;
      font-size: 1.3em;
    }
    .dataHeard {
      position: absolute;
      top: 90px;
      right: 20px;
      width: 420px;
      height: 50px;
      background-color: #07173d;
      border-bottom: 1px solid #7b86b8;
      color: #6ebaff;
      li {
        float: left;
        list-style-type: none;
        height: 50px;
        line-height: 50px;
      }
    }
    .data {
      position: absolute;
      top: 160px;
      right: 20px;
      width: 420px;
      height: 800px;
      color: white;
      overflow: hidden;
      ul {
        position: relative;
        width: 420px;
        height: 50px;
        li {
          float: left;
          list-style-type: none;
          height: 50px;
          line-height: 50px;
        }
        li img {
          position: absolute;
          top: 9px;
        }
        .dataOne {
          cursor: pointer;
          margin-left: 28px;
          width: 164px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .dataName {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #18fefe;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #0a425d;
          text-align: center;
        }
        .dataNameTwo {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #fc1505;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #64301f;
          text-align: center;
        }
      }
    }
  }
  .bottomOne {
    position: absolute;
    bottom: 0px;
    left: 460px;
    width: 460px;
    height: 500px;
    margin-left: 30px;
    background: url(~@/assets/dataVisualization/emergencyPlan/emergencyPlanLeft.png);
    .bar {
      width: 460px;
      height: 50px;
      background: url(~@/assets/dataVisualization/emergencyPlan/bar.png)
        no-repeat center;
      position: absolute;
      padding-left: 50px;
      line-height: 50px;
      color: white;
      font-size: 1.3em;
    }
    .dataHeard {
      position: absolute;
      top: 70px;
      right: 20px;
      width: 420px;
      height: 50px;
      background-color: #07173d;
      border-bottom: 1px solid #7b86b8;
      color: #6ebaff;
      li {
        float: left;
        list-style-type: none;
        height: 50px;
        line-height: 50px;
      }
    }
    .data {
      position: absolute;
      top: 130px;
      right: 20px;
      width: 420px;
      height: 350px;
      color: white;
      overflow: hidden;
      ul {
        position: relative;
        width: 420px;
        height: 50px;
        li {
          float: left;
          list-style-type: none;
          height: 50px;
          line-height: 50px;
        }
        li img {
          position: absolute;
          top: 9px;
        }
        .dataOne {
          cursor: pointer;
          margin-left: 28px;
          width: 164px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .dataName {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #18fefe;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #0a425d;
          text-align: center;
        }
        .dataNameTwo {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #fc1505;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #64301f;
          text-align: center;
        }
      }
    }
  }
  .bottomTow {
    position: absolute;
    bottom: 0px;
    right: 460px;
    width: 460px;
    height: 500px;
    margin-right: 30px;
    background: url(~@/assets/dataVisualization/emergencyPlan/emergencyPlanLeft.png);
    .bar {
      width: 460px;
      height: 50px;
      background: url(~@/assets/dataVisualization/emergencyPlan/bar.png)
        no-repeat center;
      position: absolute;
      padding-left: 50px;
      line-height: 50px;
      color: white;
      font-size: 1.3em;
    }
    .dataHeard {
      position: absolute;
      top: 70px;
      right: 20px;
      width: 420px;
      height: 50px;
      background-color: #07173d;
      border-bottom: 1px solid #7b86b8;
      color: #6ebaff;
      li {
        float: left;
        list-style-type: none;
        height: 50px;
        line-height: 50px;
      }
    }
    .data {
      position: absolute;
      top: 130px;
      right: 20px;
      width: 420px;
      height: 350px;
      color: white;
      overflow: hidden;
      ul {
        position: relative;
        width: 420px;
        height: 50px;
        li {
          float: left;
          list-style-type: none;
          height: 50px;
          line-height: 50px;
        }
        li img {
          position: absolute;
          top: 9px;
        }
        .dataOne {
          cursor: pointer;
          margin-left: 28px;
          width: 164px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .dataName {
          border-radius: 10px 10px 10px 10px;
          border: 2px solid #18fefe;
          width: 100px;
          height: 40px;
          line-height: 40px;
          position: absolute;
          top: 5px;
          right: 0px;
          background-color: #0a425d;
          text-align: center;
        }
      }
    }
  }
}
</style>
